import { defineStore, storeToRefs } from "pinia";
import { ref } from "vue";

import {
  getOverviewService,
  getAllRfidListService,
  getAvailableRfidListService,
  getYearDataService,
  getLocationDataService,
} from "@/api/deskApi";
import { usePersistStore } from "./persist";
export const useDeskStore = defineStore("desk", () => {
  const persistStore = usePersistStore();
  const {
    overviewData,
    userInfo,
    mapChartData,
    rfidAllList,
    rfidAvailableList,
    barChartXData,
    barChartYData,
  } = storeToRefs(persistStore);

  //获取全部的rfid请求
  const getAllRfids = async () => {
    const res = await getAllRfidListService();
    rfidAllList.value = res.data;
  };
  //获取可用的rfid请求
  const getAvailableRfids = async () => {
    const res = await getAvailableRfidListService();
    rfidAvailableList.value = res.data;
  };

  //获取概览数据
  const getOverview = async () => {
    const res = await getOverviewService();
    overviewData.value.location = res.data.location;
    overviewData.value.extra = res.data.extra;
    overviewData.value.categories = res.data.categories;
  };
  //获取年份数据
  const yearData = ref([]);
  const getYearData = async () => {
    const res = await getYearDataService();
    yearData.value = res.data;
    const minYear = yearData.value[0].year;
    const maxYear = yearData.value[yearData.value.length - 1].year;
    overviewData.value.year = minYear + "~" + maxYear;
    barChartXData.value = [];
    barChartYData.value = [];
    yearData.value.forEach((item) => {
      barChartXData.value.push(item.year);
      barChartYData.value.push(item.number);
    });
  };
  //展示年份数据的条形统计图相关数据
  const barOption = ref({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      // 需要表示的类别
      type: "category",
      data: barChartXData.value,
      axisLabel: {
        show: true,
        color: "#ffffff",
        fontSize: 16,
      },
    },
    yAxis: {
      // 值
      type: "value",
      axisLabel: {
        show: true,
        color: "#ffffff",
        fontSize: 16,
      },
    },
    series: [
      {
        name: "单料烟数目",
        data: barChartYData.value,
        type: "bar",
        itemStyle: {
          normal: {
            color: function (params) {
              if (params.data >= 0 && params.data < 100) {
                return "#c23531";
              } else if (params.data >= 100 && params.data < 200) {
                return "#2f4554";
              } else if (params.data >= 200 && params.data < 300) {
                return "#61a0a8";
              } else if (params.data >= 300 && params.data < 400) {
                return "#d48265";
              } else if (params.data >= 400 && params.data < 500) {
                return "#749f83";
              } else {
                return "#5470c6";
              }
            },
          },
        },
      },
    ],
  });
  //获取产地数据
  const getLocationData = async () => {
    const res = await getLocationDataService();
    mapChartData.value = [];
    res.data.forEach((e) => {
      if (e.number > 0) {
        mapChartData.value.push({ name: e.location, value: e.number });
      }
    });
  };
  const mapOption = ref({
    tooltip: {
      trigger: "item",
    },
    //左侧小导航图标
    visualMap: {
      show: true,
      x: "center",
      y: "40",
      splitList: [
        { start: 1, end: 100 },
        { start: 100, end: 200 },
        { start: 200, end: 300 },
        { start: 300, end: 400 },
        { start: 400, end: 500 },
        { start: 500 },
      ],
      color: ["#ffb43d", "#5475f5", "#85daef", "#9feaa5", "#74e2ca", "#0074bc"], // e6ac53 '#9fb5ea'
      textStyle: {
        color: "#black",
      },
    },
    geo: {
      map: "china",
      layoutCenter: ["50%", "51.5%"], //地图位置
      layoutSize: "95%",
      // zoom: 0.,
      roam: false, //关闭缩放
      itemStyle: {
        normal: {
          borderColor: "rgba(147, 235, 248, 1)",
          borderWidth: 0.5,
          color: {
            type: "linear-gradient",
            x: 0,
            y: 1500,
            x2: 2500,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#009DA1", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#005B9E", // 50% 处的颜色
              },
            ],
            global: true, // 缺省为 false
          },
          opacity: 0.5,
        },
        emphasis: {
          areaColor: "#2a333d",
        },
      },
      z: 2,
    },
    series: [
      {
        name: "",
        type: "map",
        map: "china",
        label: {
          show: true,
          color: "black",
          fontSize: 14,
        },
        aspectScale: 0.75,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "95%",
        roam: false, //关闭缩放
        itemStyle: {
          normal: {
            borderColor: "rgba(147, 235, 248, 0.6)",
            borderWidth: 0.8,
            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 1200,
              x2: 1000,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#009DA1", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#005B9E", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
          },
          emphasis: {
            areaColor: "rgba(147, 235, 248, 0)",
          },
        },
        zlevel: 1,
        data: mapChartData.value,
      },
    ],
  });

  const top = ref(false);
  const showTop = () => {
    top.value = true;
  };
  const hiddenTop = () => {
    top.value = false;
  };

  return {
    overviewData,
    barOption,
    mapOption,
    top,
    getOverview,
    getAllRfids,
    getAvailableRfids,
    getYearData,
    getLocationData,
    showTop,
    hiddenTop,
  };
});
